<template>
  <div class="progressRingContainer">
    <!-- 最外环 -->
    <div class="baseRing">
      <!-- 中间环 -->
      <div class="middleRing">
        <!-- 两个进度环 -->
        <div
          class="progressBar"
          id="pieChart"
          :class="{ 'full-color': isFullColor }"
        ></div>
        <!-- 遮盖在进度环上的展示区 -->
        <div class="circleBar">
          <!-- 外层环 -->
          <div class="outerRing">
            <!-- 内层环 -->
            <div class="innerRing">
              <!-- 中间的内容 -->
              <img
                class="folderIcon"
                src="../assets/imgs/repairWorkflow/inspectionWork5.png"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";

const props = defineProps({
  bluePercent: {
    type: Number,
    default: 0,
  },
});

const isFullColor = ref(false);

// 动态更新进度比例
function updatePieChart(percent) {
  const chart = document.getElementById("pieChart");
  const clampedPercent = Math.min(100, Math.max(0, Number(percent)));
  const degrees = 3.6 * clampedPercent;

  // 判断是否全蓝或全绿（考虑浮点误差）
  isFullColor.value =
    Math.abs(clampedPercent - 100) < 0.01 || Math.abs(clampedPercent) < 0.01;

  chart.style.setProperty("--blue-end", `${degrees}deg`);
}

// 示例：蓝色占47.1%
onMounted(() => updatePieChart(47.1));

// 监听props变化
watch(
  () => props.bluePercent,
  (newVal) => {
    // updatePieChart(newVal);
  }
);
</script>

<style lang="scss" scoped>
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 主容器 */
.progressRingContainer {
  position: relative;
  width: 214px;
  height: 214px;
  background-color: #030f3a;
  /* 最外层基础环 */
  .baseRing {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #174474;
    .middleRing {
      z-index: 2;
      position: absolute;
      width: 202px;
      height: 202px;
      top: 6px;
      left: 6px;
      border-radius: 50%;
      background-color: #01142c;
      .progressBar {
        z-index: 10;
        position: absolute;
        width: 188px;
        height: 188px;
        top: 7px;
        left: 7px;
        border-radius: 50%;
        background-color: #12df31;
        background: conic-gradient(
          #00eeff 0deg calc(var(--blue-end) - 5deg),
          transparent calc(var(--blue-end) - 2deg) var(--blue-end),
          #00ff2b var(--blue-end) calc(360deg - 5deg),
          transparent calc(360deg - 2deg) 360deg
        );
        --blue-end: 120deg; /* 默认蓝色结束角度 */
        transform: scaleX(-1); /* 水平翻转实现逆时针 */
        /* 全色状态下的样式 */
        &.full-color {
          background: conic-gradient(
            #00eeff 0deg var(--blue-end),
            #00ff2b var(--blue-end) 360deg
          );
        }
      }
      .circleBar {
        z-index: 100;
        position: absolute;
        width: 168px;
        height: 168px;
        top: 17px;
        left: 17px;
        border-radius: 50%;
        background-color: #030f3a;
        .outerRing {
          z-index: 1000;
          position: absolute;
          width: 130px;
          height: 130px;
          top: 19px;
          left: 19px;
          border: 4px solid #0e4361;
          border-radius: 50%;
          background-color: transparent;
          .innerRing {
            z-index: 1000;
            position: absolute;
            width: 110px;
            height: 110px;
            top: 6px;
            left: 6px;
            border: 2px solid #29689f;
            border-radius: 50%;
            background-color: transparent;
            .folderIcon {
              z-index: 1000;
              position: absolute;
              width: 37px;
              height: 34px;
              top: 36px;
              left: 37.5px;
            }
          }
        }
      }
    }
  }
}
</style>